<template>
  <div>
    <van-calendar
      switch-mode="month"
      year-month
      show-mark="false"
      title="日历"
      :poppable="false"
      :show-confirm="false"
      :style="{ height: '330px', backgroundColor: '#000', color: '#fff' }"
    />
  </div>
  <KotoTabbar></KotoTabbar>
  <div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }" />
    <div class="popup-content">
      <van-cell-group>
        <van-cell v-for="(item, index) in activities" :key="index">
          <template #title>
            <div class="date">{{ item.activeName }}</div>
            {{ item.createTime }}
            <VanCheckbox class="text"></VanCheckbox>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import http from '@/utils/http'
const activities = ref([])
// 钩子函数请求用户信息
onMounted(() => {
  http({
    url: '/user/userInfo',
    method: 'get',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      token: localStorage.getItem('Token'),
    },
  })
    .then((response) => {
      console.log(response.data)
      // 成功获取用户信息后，请求活动列表
      if (response.data.code === 200) fetchActivities()
      else console.log('失败' + response.data)
    })
    .catch((error) => {
      console.error('获取用户信息失败:', error)
    })
})

// 定义一个获取活动列表的函数
function fetchActivities() {
  http({
    url: '/user/activity/getList',
    method: 'get',
    headers: {
      token: localStorage.getItem('Token'),
    },
  })
    .then((response) => {
      activities.value = response.data.data
      console.log(response.data)
    })
    .catch((error) => {
      console.error('获取活动列表失败:', error)
    })
}
</script>

<style scoped lang="css">
.popup-content {
  padding: 10px;
}

.date {
  font-size: 15px;
  color: #888;
}
.text {
  float: right;
  margin-bottom: 20px;
}
</style>
